<template>
  <div class="custom-table" v-loading="loading">
    <div v-if="!groups.length" class="easy-container no-data">{{ loading ? '' : '暂无数据' }}</div>
    <div v-for="group in groups" :key="group.id" class="easy-container flex content-space-between">
      <div class="cell">
        <router-link :to="`/groups/${group.id}`" class="title link">{{ group.title }}</router-link>
        <p>
          <router-link :to="`/users/${group.owner.id}`" class="title link">
            <svg-icon icon-name="sprite_icons_profile" tooltip="创建者" class-name="info" />
            {{ group.owner.nickname }}
          </router-link>
          <span>{{ group.desc }}</span>
        </p>
      </div>
      <div class="cell text-right" style="min-width: 8rem;">
        <div class="list-icons flex content-end align-items-center">
          <span class="icon-holder flex align-items-center">
            <svg-icon icon-name="gitlab_users" tooltip="群组人数" />
            <span>{{ group.membersCount }}</span>
          </span>
        </div>
        <timeago2 :date-time="group.created_at" pre-text="创建于 " />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'groups-list', // 群组列表
  props: {
    groups: {
      type: Array,
      required: true,
    },
    loading: {
      type: Boolean,
      required: true,
    },
  },
};
</script>

<style></style>
